/*
    Copyright 2011 - Tommi Laukkanen (www.substanceofcode.com)

    This file is part of MeeToDo.

    MeeToDo is free software: you can redistribute it and/or modify
    it under the terms of the GNU Lesser General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    MeeToDo is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Lesser General Public License for more details.

    You should have received a copy of the GNU Lesser General Public License
    along with MeeToDo. If not, see <http://www.gnu.org/licenses/>.
*/
import QtQuick 1.1

Rectangle {
    id: button
    width: 200
    height: 62
    property int ypos: 0
    property string label: "Test"
    property string icon: ""
    signal clicked()
    y: button.ypos
    radius: 5
    gradient: mouseArea.pressed ? pressedGradient : idleGradient
    border.color: "#000"
    border.width: 1
    smooth: false

    Gradient {
        id: idleGradient
        GradientStop{ color: "#333"; position: 0.0 }
        GradientStop{ color: "#111"; position: 1.0 }
    }
    Gradient {
        id: pressedGradient
        GradientStop{ color: "#111"; position: 0.0 }
        GradientStop{ color: "#222"; position: 1.0 }
    }

    Text {
        font.pixelSize: 32
        font.bold: true
        anchors.centerIn: parent
        text: button.label
        color: "#eee"
    }

    Rectangle {
        x: 10
        width: parent.width - 20
        y: parent.height
        height: 1
        color: "#fff"
        opacity: 0.15
    }

    states: [
        State {
            name: "hidden"
            PropertyChanges {
                target: button
                y: button.height + 5
            }
        },
        State {
            name: "shown"
            PropertyChanges {
                target: button
                y: button.ypos
            }
        }
    ]

    transitions: Transition {
        NumberAnimation { target: button; property: "y"; duration: 800; easing.type: "InOutCubic" }
    }

    MouseArea {
        id: mouseArea
        anchors.fill: parent
        onClicked: {
            button.clicked();
        }
    }

}
